﻿<%@ Page Language="C#" MasterPageFile="~/MasterPage/MobiMap.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="MobiMap.Guest.Home" Title="Untitled Page" %>
<%@ MasterType VirtualPath="~/MasterPage/MobiMap.Master" %> 

<asp:Content ID="idHead" ContentPlaceHolderID="head" runat="server">
    <title>Guest Home</title>
    <script type="text/javascript">
              
        function getImgMapNode()
        {
            return document.getElementById("<%=imgMap.ClientID%>");            
        }
        function LoadMap(res)
        {
            var fr = document.getElementById("<%=imgMap.ClientID%>");
            if(!fr)
                return;
            fr.src = "../Guest/GetMap.aspx?" + res + "&t=" + new Date().getTime();            
        } 
        
        function showFlag()
        {   
            
            //CallServer("");
            GetPlaceInfo();
            return false;            
        }        
        
        var mapHeight = 0;
        var mapWidth = 0;
        function changedImageMap()
        {   
            ResetMapControl();                              
            showFlag();
        }
        
        function ResetMapControl()
        {            
            mapHeight = document.getElementById("<%=imgMap.ClientID%>").height;
            mapWidth = document.getElementById("<%=imgMap.ClientID%>").width;
            
            //document.getElementById("mapControl").style.top = "-" + mapHeight + "px";
            //document.getElementById("mapControl").style.display = "block";
        }
        
        function GetDataFromServer() {
            
            if(xmlHttp.readyState != 4 || xmlHttp.status != 200)
                return;
                
            var arrRespond = xmlHttp.responseText.split("$$@@$$@@");
            var strInfo = arrRespond[0];
            
            if(strInfo == "")
                return;
            
            var map = document.getElementById("<%=imgMap.ClientID%>");              
            var mapLeft = getElementLeft(map);
            var mapTop = getElementTop(map);
            
            //--------------------------------------Ve tag dia diem len man hinh
            var arrData = strInfo.split("@");
            if (arrData[0] == "address") {
                var flagNode = document.getElementById("imgFlag");
                if (arrData[1] != "-1") {
                    var left_top = arrData[1].split(";");
                    var newLeft = parseInt(left_top[0]);
                    var newTop = parseInt(left_top[1]);

                    flagNode.style.left = (mapLeft + newLeft) + "px";
                    flagNode.style.top = (mapTop + newTop) + "px";
                    var width_height = arrData[2].split(";");
                    var newWidth = parseInt(width_height[0]);
                    var newHeight = parseInt(width_height[1]);
                    flagNode.width = newWidth;
                    flagNode.height = newHeight;
                    flagNode.style.display = "block";

                    if (arrData.length > 3) {
                        var infoNode = document.getElementById("divInfo");
                        infoNode.style.display = "block";
                        infoNode.style.left = (newLeft + mapLeft - 75) + "px";
                        infoNode.style.top = (newTop + mapTop - 90) + "px";
                        document.getElementById("hiddenFlag").value = "address";
                        document.getElementById("infoName").innerHTML = arrData[3];
                        document.getElementById("infoAddress").innerHTML = arrData[4];

                        //neu la dich vu
                        if (arrData.length == 6) {
                            document.getElementById("viewDetail").style.display = "block";
                            document.getElementById("linkDetail").href = "../Guest/ServiceDetail.aspx?ID=" + arrData[5] + "&flag=address";
                        }

                    }
                }
                else {
                    flagNode.style.display = "none";
                }
            }
            //--------------------------------------Ve tag Vi tri cua toi len man hinh
            else if (arrData[0] == "myLocation") {
                var flagNode = document.getElementById("imgFlag");
                if (arrData[1] != "-1") {
                    var left_top = arrData[1].split(";");
                    var newLeft = parseInt(left_top[0]);
                    var newTop = parseInt(left_top[1]);

                    flagNode.src = "../Image/myLocation32.png";
                    flagNode.style.left = (mapLeft + newLeft) + "px";
                    flagNode.style.top = (mapTop + newTop) + "px";
                    var width_height = arrData[2].split(";");
                    var newWidth = parseInt(width_height[0]);
                    var newHeight = parseInt(width_height[1]);
                    flagNode.width = newWidth;
                    flagNode.height = newHeight;
                    flagNode.style.display = "block";

                    if (arrData.length > 3) {
                        var infoNode = document.getElementById("divInfo");
                        infoNode.style.display = "block";
                        infoNode.style.left = (newLeft + mapLeft - 75) + "px";
                        infoNode.style.top = (newTop + mapTop - 90) + "px";
                        document.getElementById("hiddenFlag").value = "address";
                        document.getElementById("infoName").innerHTML = arrData[3];
                        document.getElementById("infoAddress").innerHTML = arrData[4];

                        //neu la dich vu
                        if (arrData.length == 6) {
                            document.getElementById("viewDetail").style.display = "block";
                            document.getElementById("linkDetail").href = "../Guest/ServiceDetail.aspx?ID=" + arrData[5] + "&flag=address";
                        }

                    }
                }
                else {
                    flagNode.style.display = "none";
                }
            }
//            //--------------------------------------Ve tag lstService len man hinh
//            else if (arrData[0] == "lstService") {
//                for (i = 0; i < ((arrData.Length - 1) / 2); i++) {
//                    var html = "<div align='left' style='height:0px;'><img id='imgFlag" + i.toString() + "' onclick='ShowAddressInfo(1)' src='../Image/inputAddress32.png' alt='' class='flag'/></div>".interpolate(json);
//                    $('idContent').insert(html); 
//                var flagNode = document.getElementById("imgFlag" + i.toString());
//                if (arrData[i*2+1] != "-1") {
//                    var left_top = arrData[i * 2 + 1].split(";");
//                    var newLeft = parseInt(left_top[0]);
//                    var newTop = parseInt(left_top[1]);

//                    flagNode.src = "../Image/myLocation32.png";
//                    flagNode.style.left = (mapLeft + newLeft) + "px";
//                    flagNode.style.top = (mapTop + newTop) + "px";
//                    var width_height = arrData[i * 2 + 2].split(";");
//                    var newWidth = parseInt(width_height[0]);
//                    var newHeight = parseInt(width_height[1]);
//                    flagNode.width = newWidth;
//                    flagNode.height = newHeight;
//                    flagNode.style.display = "block";

//                    if (arrData.length > 3) {
//                        var infoNode = document.getElementById("divInfo");
//                        infoNode.style.display = "block";
////                        infoNode.style.left = (newLeft + mapLeft - 75) + "px";
////                        infoNode.style.top = (newTop + mapTop - 90) + "px";
////                        document.getElementById("hiddenFlag").value = "address";
////                        document.getElementById("infoName").innerHTML = arrData[i * 2 + 3];
////                        document.getElementById("infoAddress").innerHTML = arrData[i * 2 + 4];

////                        //neu la dich vu
////                        if (arrData.length == 6) {
////                            document.getElementById("viewDetail").style.display = "block";
////                            document.getElementById("linkDetail").href = "../Guest/ServiceDetail.aspx?ID=" + arrData[i * 2 + 5] + "&flag=address";
////                        }

//                    }
//                }
//                else {
//                    flagNode.style.display = "none";
//                }
//            }
//            }
            //--------------------------------------Ve tag Tim duong di len man hinh
            else if (arrData[0] == "street") {

                document.getElementById('divBtnDirection').style.display = "block";
                document.getElementById('btnDirection').style.display = "block";
                var flagNode = document.getElementById("imgFlag");
                if (arrData[1] != "-1") {
                    var left_top = arrData[1].split(";");
                    var newLeft = parseInt(left_top[0]);
                    var newTop = parseInt(left_top[1]);

                    flagNode.src = "../Image/startAddress32.png";
                    flagNode.style.left = (mapLeft + newLeft) + "px";
                    flagNode.style.top = (mapTop + newTop) + "px";
                    var width_height = arrData[2].split(";");
                    var newWidth = parseInt(width_height[0]);
                    var newHeight = parseInt(width_height[1]);
                    flagNode.width = newWidth;
                    flagNode.height = newHeight;
                    flagNode.style.display = "block";

                    if (arrData.length > 5 && arrData[5] == "start") {
                        var infoNode = document.getElementById("divInfo");
                        infoNode.style.display = "block";
                        infoNode.style.left = (newLeft + mapLeft - 75) + "px";
                        infoNode.style.top = (newTop + mapTop - 90) + "px";
                        document.getElementById("hiddenFlag").value = arrData[5];
                        document.getElementById("infoName").innerHTML = arrData[6];
                        document.getElementById("infoAddress").innerHTML = arrData[7];

                        //neu la dich vu
                        if (arrData.length == 9) {
                            document.getElementById("viewDetail").style.display = "block";
                            document.getElementById("linkDetail").href = "../Guest/ServiceDetail.aspx?ID=" + arrData[8] + "&flag=start";
                        }
                    }

                }
                else {
                    flagNode.style.display = 'none';
                }

                var endNode = document.getElementById("imgEnd");
                if (arrData[3] != "-1") {
                    var left_top = arrData[3].split(";");
                    var newLeft = parseInt(left_top[0]);
                    var newTop = parseInt(left_top[1]);

                    endNode.style.left = (mapLeft + newLeft) + "px";
                    endNode.style.top = (mapTop + newTop) + "px";
                    var width_height = arrData[4].split(";");
                    var newWidth = parseInt(width_height[0]);
                    var newHeight = parseInt(width_height[1]);
                    endNode.width = newWidth;
                    endNode.height = newHeight;
                    endNode.style.display = "block";

                    if (arrData.length > 5 && arrData[5] == "end") {
                        var infoNode = document.getElementById("divInfo");
                        infoNode.style.display = "block";
                        infoNode.style.left = (newLeft + mapLeft - 75) + "px";
                        infoNode.style.top = (newTop + mapTop - 90) + "px";
                        document.getElementById("hiddenFlag").value = arrData[5];
                        document.getElementById("infoName").innerHTML = arrData[6];
                        document.getElementById("infoAddress").innerHTML = arrData[7];

                        //neu la dich vu                            
                        if (arrData.length == 9) {
                            document.getElementById("viewDetail").style.display = "block";
                            document.getElementById("linkDetail").href = "../Guest/ServiceDetail.aspx?ID=" + arrData[8] + "&flag=end";
                        }
                    }

                }
                else {
                    endNode.style.display = 'none';
                }
            }
                  
        }
        
        function Direction()
        {
            ShowHideDivDirection();
            var toHere = document.getElementById("infoName").innerHTML + ", "
                        + document.getElementById("infoAddress").innerHTML;
            FillDirection(toHere);
            var flag = document.getElementById("hiddenFlag");  
            var point = document.getElementById("hiddenPoint");    
            
            ChangeValueHidden(flag.value + "_" + point.value); //startinfo or endinfo or homeinfo, startpoint or endpoint            
            
            return false;
        }
        
        function getFlagNode()
        {
            return document.getElementById("hiddenFlag");
        }
        
        function SearchNearBy()
        {
            ShowHideDivService();
            var strNearBy = document.getElementById("infoName").innerHTML + ", "
                        + document.getElementById("infoAddress").innerHTML;
            FillNearBy(strNearBy);
            
            var flag = document.getElementById("hiddenFlag");
            ChangeValueHidden("nearby" + "_" + flag.value);
            return false;
        }
        
        //------------------------Search Info
        function ShowAddressInfo(idxFlag)
        {
            if(document.getElementById("divInfo").style.display == "block")
            {
                document.getElementById("divInfo").style.display = "none";
                return;
            }                        
                        
            document.getElementById("hiddenPoint").value = "end";
            var url = "showinfo=true&idxFlag=" + idxFlag; 
            url += "&t=" + new Date().getTime();
            
            hideFlag();
            LoadMap(url);
        }

        function CloseDivInfo() 
        {
            document.getElementById("divInfo").style.display = "none";
            ChangeValueHidden("none");
            document.getElementById("hiddenPoint").value = "";
        }
        
        function ShowListDirection()
        {
            document.location.href = "../Guest/Direction.aspx";
        }
    </script>
</asp:Content>
<asp:Content ID="idContent" ContentPlaceHolderID="mainArea" runat="server">   
<div id="divMainMap">
    
    <div align="center" class=" map_control" id="mapControl">   

        <div class="zoom-in-out" align="center">
            <img src="../Image/ZoomIn.png" alt="+" onclick="Zoom('1')" /><br />
            <img src="../Image/ZoomOut.png" alt="-" onclick="Zoom('-1')" />  
        </div>
        
        <div class="map_mode" align="left">                
            <select class="mapType_combobox" id="cmbMode" onchange="return ChangeType(this.selectedIndex);" runat="server">
                <option value="0">Map</option>
                <option value="1" style="display:none;">Satellite</option>
                <option value="2">Hybrid</option>
            </select><br />                             
        </div>                           

        <div class="title_mode">
            <div id="divBtnDirection" style="height: 30px; padding: 0 10px; border-left: 1px solid White; display: none;">
                <img id="btnDirection" class="showDirection" src="../Image/Direction.png" alt="Direction" onclick="ShowListDirection();"/>      
            </div>
        </div>
    
        <div class="zoom-compass_control" align="center">
            <div class="compass">
                <img src="../Image/NavButton.png"/> 
                <img src="../Image/NavButton.png" onclick="MoveMap('up')"/> 
                <img src="../Image/NavButton.png" /> 
                <img src="../Image/NavButton.png" onclick="MoveMap('left')"/> 
                <img src="../Image/NavButton.png" /> 
                <img src="../Image/NavButton.png" onclick="MoveMap('right')"/> 
                <img src="../Image/NavButton.png" /> 
                <img src="../Image/NavButton.png" onclick="MoveMap('bottom')"/> 
                <img src="../Image/NavButton.png" /> 
            </div>                                           
        </div>
    </div> 
    
    <div align="center" id="map_canvas" class="map_canvas">        
        <asp:Image ID="imgMap" CssClass="mapImg" runat="server" Width="100%" 
                   Height="100%" ImageUrl="" AlternateText=""/>
    </div>
    
    <div align="left" style="height:0px;">
        <img id="imgFlag" onclick="ShowAddressInfo(1)" src="../Image/inputAddress32.png" alt="" class="flag"/>
    </div>
    
    <div align="left" style="height:0px;">
        <img id="imgEnd" onclick="ShowAddressInfo(2)" src="../Image/endAddress32.png" alt="" class="flag"/>
    </div>
             
    
    <div class="info" id="divInfo">
        <div class="info_wrapper" align="left">
            <div class="info_title">
                <label id="infoTitle" runat="server">Place Infomation</label>
                <img src="../Image/Close.png" alt="" onclick="CloseDivInfo()"/>
            </div>
            <div class="info_content" id="infoContent">
                <div>
                    <b id="infoName"></b><br />
                    <label id="infoAddress"></label>
                    <input type="hidden" id="hiddenFlag" value="" />
                    <input type="hidden" id="hiddenPoint" value="" />
                </div>
             </div>
            <div class="info_footer">                
                <div class="info_subfunction">
                    <asp:LinkButton ID="infoDirection" runat="server" OnClientClick="return Direction();">Direction</asp:LinkButton>, 
                    <asp:LinkButton ID="infoNearBy" runat="server" OnClientClick="return SearchNearBy();">Rechercher à proximité</asp:LinkButton> 
                </div>
            </div>
        </div>
        <div align="center" style="position: relative; top: -1px;"><img src="../Image/Arrow.png" alt=""/></div>
    </div>    
</div>
</asp:Content>
